<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="head-container">
      <crudOperation :permissions="permissions"></crudOperation>
    </div>
    <!-- 表格渲染 -->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
    >
      <el-table-column v-if="columns.visible('storeName')" label="门店名称" prop="storeName"></el-table-column>
      <el-table-column v-if="columns.visible('phone')" label="电话" prop="phone"></el-table-column>
      <el-table-column v-if="columns.visible('province')" label="省" prop="province"></el-table-column>
      <el-table-column v-if="columns.visible('city')" label="市" prop="city"></el-table-column>
      <el-table-column v-if="columns.visible('area')" label="区" prop="area"></el-table-column>
      <el-table-column v-if="columns.visible('address')" label="详细地址" prop="address"></el-table-column>
      <el-table-column v-if="columns.visible('status')" label="状态" prop="status">
        <template v-slot="slot">
          <template v-if="slot.row.status === 0">正常</template>
          <template v-if="slot.row.status === 1">无效</template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <template v-if="scope.row.createType === 1"> -->
            <div class="opetion">
              <udOperation
              :data="scope.row"
              :permissions="permissions"
             />
             <el-button type="text" style="padding-left:10px" @click="onClickStore(scope.row)">合作药房</el-button>
            </div>
               
            
          <!-- </template> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增、编辑门店 -->
    <storeForm></storeForm>
    <!-- 合作药房 -->
    <el-dialog
    class="clinic-operate-dialog"
    :width="dialogWidth"
    append-to-body
    top="5vh"
    title='合作药房'
    :close-on-click-modal="false"
    :visible.sync="showStore"
    style="cursor:default;"
    :destroy-on-close="true"
  >
   <div v-for="(item,index) in selectList" :key="index">
       <el-col style="padding-top:4px;">
         <template>
           <el-checkbox :checked="item.rFlage" @change="onChangeFlage(item)">
            <span style="font-size:14px;">{{item.storeName}}</span>
           </el-checkbox>
         </template>
       </el-col>
    </div> 
  <span slot="footer" class="dialog-footer">
    <el-button @click="showStore = false">取 消</el-button>
    <el-button type="primary" @click="onClickSure">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
import CRUD, { presenter, header } from "@crud/crud";
import crudOperation from "@crud/CRUD.operation";
import { add,edit,getSList,addSList } from "@/api/charges/store";
import udOperation from '@crud/UD.operation'
import storeForm from "./module/form";

let defaultCrud = CRUD({
  title: "门店",
  url: "store/allList",
  method: "post",
  pagination: false,
  crudMethod: { add,edit },
  query: {},
});

export default {
  name: "store",
  components: { crudOperation, storeForm, udOperation },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      permissions: [
        {
          type: "add",
          permission: ["admin","store:add"],
          position: 1
        },{
          type: "edit",
          permission: ["admin","store:edit"],
          position: 2
        }
      ],
      showStore:false,
      selectMap:{},
      selectStoreName:'',
      checkList:[],
      selectList:[],
      rptList:[],
    }
  },
  computed: {
    style() {
      return {
        height: "calc(100% - 193px)"
      };
    },
    dialogWidth() {
      return window.innerWidth * 0.4 + "px";
    }
  },
  methods:{
    onClickStore(row){
      this.selectMap = row;
      this.selectStoreName = row.storeName;
      this.selectList = [];
      
      this.rptList = [];
      getSList(row.id).then(res => {
        console.log(res);
        this.crud.data.forEach(e => {
        if(e.id != row.id){
          e.rFlage = false;
          this.selectList.push(e);
        }
      });
        this.rptList = res;
        this.rptList.forEach(em => {
          var sItem = this.selectList.find((item) => {
           return item.id == em.cptStoreId || item.id == em.storeId;
        });
        
        if(sItem){
          sItem.rFlage = true;
        }
        
        });
        this.showStore = true;
        console.log(res);
      });
      
    },
    onClickSure(){
      var tempList = [];
      this.selectList.forEach(e => {
        if(e.rFlage){
          var tMap = {'cptStoreId':'','createTime':'','storeId':''};
          tMap.storeId = this.selectMap.id;
          tMap.cptStoreId = e.id;
          tempList.push(tMap);
        }
      });
      addSList(tempList).then(res => {
        console.log(res);
        this.showStore = false;
      });
      
    },
    onChangeFlage(item){
      item.rFlage = !item.rFlage;
    },
  }
}
</script>

<style lang="scss">
.opetion{
  display: flex;
  flex-direction: row;
}
 </style>